<!--
 * @Author: bujue 2833602942@qq.com
 * @Date: 2023-02-24 16:39:35
 * @LastEditors: bujue 2833602942@qq.com
 * @LastEditTime: 2023-03-02 19:38:34
 * @FilePath: \vue-project\src\App.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<script setup>

</script>

<template>
  <div class="head">
    <div class="C">
      <van-row justify="space-around" wrap="flase">
        <van-col span="4"><img class="img1"
            src=""
            alt="">
        </van-col>
        <van-col span="11"
          style="color: #98989f;
                                                                    line-height: 19.45px;
                                                                    vertical-align: middle;padding-top: 3px;">品牌特卖·100%正品</van-col>
        <van-col span="2">登录</van-col>
        <van-col span="1">
          <img class="img2" src="./assets/img2.jpg" alt="">
        </van-col>
      </van-row>
    </div>
    <div><van-search v-model="value" placeholder="请输入搜索关键词" class="search" />
    </div>
    <div>
      <van-tabs v-model:active="active">
        <van-tab title="推荐">
          <div class="bg">
            <div class="bg1">
              <van-image width="140" height="60 "
                src="https://h2.appsimg.com/b.appsimg.com/upload/momin/2023/03/01/27/1677666284556_229x274_90.jpg" />
              <van-image width="140" height="60 "
                src="https://h2.appsimg.com/b.appsimg.com/upload/momin/2023/03/01/193/1677666348620_229x274_90.jpg" />
              <van-image width="140" height="60 "
                src="https://h2.appsimg.com/b.appsimg.com/upload/momin/2023/03/01/79/1677666436390_229x274_90.jpg" />
            </div>
          </div>
          <van-image width="420" height="150"
            src="https://h2.appsimg.com/b.appsimg.com/upload/momin/2023/03/01/66/1677650930736_750x137_90.png" />
          <div>
            <div class="img_Arr">
              <img
                src="https://h2.appsimg.com/a.appsimg.com/upload/brand/upcb/2022/12/30/125/ias_a07c7923e994bafbd7c227b3e431f534_1135x545_85.jpg">
              <div class="font">
                <div class="title">曼妮芬Maniform内衣专场</div>
                <div class="price"><span>2</span>折起</div>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="3折疯抢">内容 2</van-tab>
        <van-tab title="唯品快抢">内容 3</van-tab>
        <van-tab title="国际">内容 4</van-tab>
      </van-tabs>
    </div>
  </div>
  <div class="toTop">
    <van-icon name="back-top" size="55" />
    
    


export default {
  setup() {
    const list = [...Array(50).keys()];
    return { list };
  },
};
    
  </div>
</template>
<style lang="less" scoped>
.toTop{
  width: 54.81px;
  height: 54.81px;
  background-color: #222222e6;
  z-index: 1000 !important;
  border-radius: 50%;
  position: fixed;
  right: 15px;
  bottom: 15px;
  color: rgb(255, 255, 255);
  
}
.head {
  background-color: #fbfbfa;

  .c {
    background-color: skyblue;
  }

  .img1 {
    height: 19.45px;
    width: 76.8px;
    padding-top: 3px;
  }

  .img2 {
    padding-top: -1px;
  }

}

.bg {
  width: 428px;
  height: 273px;
  background-image: url(https://h2.appsimg.com/b.appsimg.com/upload/momin/2023/03/01/58/1677651721800_750x478_90.jpg);
  background-size: 428px 273px;

  .bg1 {
    padding-top: 100px;
    padding-left: 5px;
  }
}

.img_Arr {
  padding-left: 0.32rem;
  width: 399px;
  height: 192px;
  border-radius: 0.24rem;
  border-width: 0.0133333rem;
  border-style: solid;
  border-color: rgb(232, 233, 235);
  background-color: rgb(255, 255, 255);


  img {
    width: 100%;
    height: 100%;
    background-color: rgb(250, 250, 250);
  }


}
</style>
<style lang="less" scoped>
.search {
  border-radius: 12px
}

.font {
  // overflow: hidden;
  // text-overflow: ellipsis;
  // font-family: Microsoft Yahei, Tahoma, Arial, Roboto, Droid Sans, Helvetica Neue, Droid Sans Fallback, Heiti SC, sans-self;
  // white-space: nowrap;
  text-align: left;
  padding-left: 0.32rem;
  border-radius: 0.24rem;
  border-width: 0.0133333rem;
  border-style: solid;
  border-color: rgb(232, 233, 235);
  background-color: rgb(255, 255, 255);
  .title{
    font-size: 14.933px;
    color: #222222;
    font-weight: 700;
  }
  .price{
    font-size: 12.8px;
    color: rgb(88, 92, 100);
    span{
      color: rgb(222, 61, 150);
    }
  }
}
</style>
